<template>
  <selectFarmType @farmtypemessage="getfarmtypemessage">
    <div slot="farmtypemain" class="farmtypemain-view">
      <div
        v-for="(item, index) in selectList"
        :key="index"
        class="base-box"
        @mouseenter="setid(item.organizationNo)"
      >
        <div v-if="nowselectid === item.organizationNo" class="selected-main">
          <div class="selected-main-line1">{{ item.organizationName }}</div>

          <div class="selected-main-line2" @click="tootherview(item)">
            <div class="selected-main-line2-but">选择基地</div>
          </div>
        </div>
        <div v-else class="base-box-title">{{ item.organizationName }}</div>
      </div>
    </div>
  </selectFarmType>
</template>
<script>
import selectFarmType from "@/components/selectFarmTypev3/index.vue";
import axios from "axios";
import { setToken } from '@/utils/auth'
export default {
  components: { selectFarmType },
  data() {
    return {
      selectList: [
      ],
      nowselectid: 1,
      farmtypemessage: { organizationName: "大田种植", organizationNo: 'dt' }
    };
  },
  mounted() {
    // this.routes()
  },
  methods: {
    // routes() {
    //   var routes = {
    //     children: this.$router.options.routes
    //   };

    //   var route = this.$route.matched;

    //   for (var i = 0; i < route.length - 1; i++) {
    //     routes = routes.children.find((e) => (e.name === route[i].name));
    //   }
    //   console.log(routes)
    //   return routes.children
    // },
    // 选择基地
    tootherview(e) {
      if (e.organizationNo) {
        this.$store.dispatch("tagsView/delView", this.$route).then(() => {
          this.$message.success("选择基地成功");
          setTimeout(() => {
            setToken('organizationBaseNo', e.organizationNo)
            setToken('organizationBaseName', e.organizationName)
            setToken('databaseName', e.databaseName)
            setToken('isTopParent', e.isTopParent)

            // setToken('organizationNo', e.organizationNo)
            this.$router.push({ name: "SystemConfiguration", params: { organizationNo: e.organizationNo } });
          }, 1000);
        });
      } else {
        this.$message.warning("这id不对呀呀呀");
      }
    },
    // 获取基地
    getbasemessage(e) {
      axios({
        method: "GET",
        url: this.$webSerUrlPro + `organization/organization/queryByFarmingType?farmingTypeNo=${e}`
        // data: {
        //   title: "axios学习",
        //   author: "Yehaocong"
        // }
      }).then(response => {
        let basemes = response.data.data
        if (basemes && basemes[0]) {
          this.selectList = basemes
          // console.log('可选择基地列表', basemes)
        } else {
          this.selectList = []
        }
      })
    },
    // ---
    getfarmtypemessage(e) {
      this.farmtypemessage = e;
      this.getbasemessage(e.farmingTypeNo)
    },
    setid(id) {
      this.nowselectid = id;
    }
  }
};
</script>
<style lang="scss" scoped>
.farmtypemain-view {
  width: 100%;
  // height: 100%;
  display: flex;
  flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: distribute;
    justify-content: flex-start;
    flex-direction: row;
  .base-box {
    width: 296px;
    height: 200px;
    margin-bottom: 10px;
    cursor: pointer;
    background-image: url("~@/assets/index-bgc.png");
    background-size: cover;
    position: relative;
    border: #009fa5 1px solid;
    margin-right: 10px;
    .base-box-title {
      width: 296px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      position: absolute;
      bottom: 0;
      left: 0;
      background-color: rgba(23, 24, 24, 0.2);
      letter-spacing: 1px;
      white-space: nowrap;
      overflow: hidden;
    }
    .selected-main {
      width: 300px;
      height: 200px;
      position: absolute;
      top: 0;
      left: 0;
      background-color: rgba(23, 24, 24, 0.6);
      background-size: cover;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border: #009fa5 1px solid;
      .selected-main-line1 {
        width: 300px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        letter-spacing: 1px;
        white-space: nowrap;
        font-size: 14px;
      }
      .selected-main-line2 {
        width: 300px;
        height: 25px;
        margin-top: 10px;
        display: flex;
        justify-content: center;
        .selected-main-line2-but {
          width: 100px;
          height: 25px;
          line-height: 25px;
          text-align: center;
          background: rgb(32, 22, 22);
          border-radius: 5px;
          color: #00d5cd;
          border: 1px solid #00d5cd;
          font-size: 14px;
          letter-spacing: 1px;
        }
        .selected-main-line2-but:hover {
          background: #00d5cd;
          color: rgb(32, 22, 22);
        }
        .selected-main-line2-but:first-of-type {
          margin-right: 10px;
        }
      }
    }
  }
}
</style>
